@if (languages.length > 1) {
    @if (languages.length > 3 || percents) {
        <button
            class="btn btn-outline-secondary btn-{{ size }} dropdown-toggle"
            #button
            (click)="dropdown.toggle()"
            tabindex="-1"
            title="{{ language.englishName }}"
            type="button">
            {{ language.iso2Code }}
        </button>
        <sqx-dropdown-menu [position]="dropdownPosition" scrollY="true" [sqxAnchoredTo]="button" *sqxModal="dropdown; closeAlways: true">
            <table>
                <tbody>
                    @for (supported of languages; track supported.iso2Code) {
                        <tr
                            class="dropdown-item"
                            [class.active]="supported === language"
                            [class.missing]="exists && !exists[supported.iso2Code]"
                            (click)="selectLanguage(supported)">
                            <td class="text-language">{{ supported.iso2Code }}</td>

                            <td>({{ supported.englishName }})</td>

                            @if (percents) {
                                <td class="text-right">{{ percents[supported.iso2Code] || 0 }} %</td>
                            }
                        </tr>
                    }
                </tbody>
            </table>
        </sqx-dropdown-menu>
    } @else {
        <div class="btn-group btn-group-{{ size }}">
            @for (supported of languages; track supported.iso2Code) {
                <button
                    class="btn btn-outline-secondary"
                    [class.active]="supported === language"
                    [class.missing]="exists && !exists[supported.iso2Code]"
                    (click)="selectLanguage(supported)"
                    tabindex="-1"
                    title="{{ supported.englishName }}"
                    type="button">
                    <span>{{ supported.iso2Code }}</span>
                </button>
            }
        </div>
    }
}
